<template>
  <div class="c-7qne3j">
    <NavBar></NavBar>
    <div class="optimization-banner">
      <img :src="headerImg" alt="图片已消失" />
    </div>
    <div>
      <van-tabs v-model="suitableGroup" @change="handleTabs" class="tabstyle">
        <van-tab title="全部"></van-tab>
        <van-tab
          v-for="item in suitableGroupList"
          :key="item.suitableGroup"
          :title="item.suitableGroupName"
          :name="item.suitableGroup"
        ></van-tab>
      </van-tabs>
      <van-tabs class="optimization-tabtwo" @change="handleChangeTab">
        <van-tab
          v-for="ele in proTypeList"
          :title="ele.productSubTypeName"
          :key="ele.index"
          :name="ele.productSubType"
        >
          <template #title>
            <div
              class="optimization-title"
              :class="
                proType === ele.productSubType
                  ? 'optimization-title-active'
                  : ''
              "
            >
              {{ ele.productSubTypeName }}
            </div>
          </template>
          <!-- <div class="optimization-contentTitle">
            <div class="optimization-name">{{ ele.productSubTypeName }}</div>
            <div class="optimization-dec">
              符合条件直接赔钱，不限用途。
            </div>
          </div> -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="c-9svu68">
              <div
                class="optimization-card"
                v-for="item in list"
                :key="item.index"
                @click="judgeProductClick(item)"
              >
                <div class="flex-row">
                  <div class="c-lgl5rn">
                    <HotsaleIcon
                      class="c-lgl5rn-hot"
                      v-if="item.isHot === 'Y'"
                    />
                    <img class="optimization-pic" :src="item.logoUrl" alt="" />
                  </div>
                  <div>
                    <div class="flex-row">
                      <div class="c-9svu68-title">{{ item.productName }}</div>
                      <div
                        :class="
                          item.isOnline === 'Y'
                            ? 'c-9svu68-title-txt'
                            : 'c-9svu68-title-active'
                        "
                      >
                        {{ item.isOnline === 'Y' ? '线上' : '线下' }}
                      </div>
                    </div>

                    <div class="c-9svu68-desc">
                      {{ item.productAbbrDescription }}
                    </div>

                    <div class="c-9svu68-customer-label">
                      <div
                        v-for="labelItem in getLabelList(item.customLabel)"
                        :key="labelItem.index"
                      >
                        {{ labelItem }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/services/h5/product'
import NavBar from '@/components/h5header'
import { mapMutations, mapState } from 'vuex'
import { configs, env } from '@/config/h5'
import judgeProClick from '@/mixin/judgeProClick'
import HotsaleIcon from '@/components/hotsale'
export default {
  components: { NavBar, HotsaleIcon },
  mixins: [judgeProClick],
  data() {
    return {
      headerImg: configs[env]['prodOptimizationImg'],
      suitableGroup: '',
      product: [],
      suitableGroupList: [],
      proType: '',
      list: [],
      popSelectInfo: {
        isOnline: '', // 出单方式
        isWanliPrefer: 'Y', // 是否是万利优选
        partnerId: [], // 合作机构
        productName: '' // 产品名称
      },
      proTypeList: [],
      curPage: 0,
      length: 10,
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapState('account', ['user'])
  },
  created() {
    this.init()
  },
  methods: {
    ...mapMutations('product', ['setProductInfo']),
    async init() {
      // 获取到产品子类型数据
      const [prodType, res] = await Promise.all([
        API.getprodListBysubType(),
        API.getprodListBysuitableGroup()
      ])
      if (prodType.data && prodType.data.code === 1000) {
        this.proTypeList = prodType.data.data
        // this.proType = prodType.data.data[0].productSubType
      }
      if (res.data && res.data.code === 1000) {
        this.suitableGroupList = res.data.data
        // this.suitableGroup = res.data.data[0].suitableGroup
      }
    },
    async onLoad() {
      this.loading = true
      this.finished = false
      this.curPage += 1
      let params = {
        curPage: this.curPage,
        length: this.length,
        isOnline: this.popSelectInfo.isOnline,
        isWanliPrefer: this.popSelectInfo.isWanliPrefer,
        partnerId: this.popSelectInfo.partnerId,
        productName: this.popSelectInfo.productName,
        productSubType: this.proType,
        suitableGroup: this.suitableGroup
      }
      const res = await API.getprodList(params)
      if (res && res.data && res.data.code === 1000) {
        this.list = this.list.concat(res.data.data.list)
        if (this.list.length < res.data.data.count) {
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
          return
        }
      } else {
        this.loading = false
        this.finished = true
      }
    },
    onClickLeft() {
      window.history.go(-1)
    },
    handleTabs(val) {
      this.suitableGroup = val
      this.list = []
      this.curPage = 0
      this.onLoad()
    },
    handleChangeTab(value) {
      if (this.proType == value) {
        this.proType = ''
      } else {
        this.proType = value
      }
      this.list = []
      this.curPage = 0
      this.onLoad()
    },
    getLabelList(value) {
      if (value.indexOf(',') > -1) {
        return value.split(',')
      } else {
        return [value]
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.tabstyle .van-tabs__nav {
  margin-left: 10px;
}
/deep/.tabstyle .van-tab {
  flex: none;
  padding: 15px;
}
/deep/.tabstyle .van-tab--active {
  font-size: 17px;
}
.c-7qne3j {
  background: #fafafa;
  height: 100vh;
  overflow: scroll;
}
/deep/.van-nav-bar .van-icon {
  color: #000;
}
.optimization-banner {
  width: 375px;
  height: 150px;
}
img {
  width: 100%;
}
.optimization-tabtwo {
  /deep/ .van-tabs__line {
    display: none;
  }
}
.optimization-title {
  padding: 4px 8px;
  color: #c4c4c4;
  background-color: #f5f5f5;
  border-radius: 10.5px;
  &-active {
    background-color: @c-color-primary;
    color: #fff;
  }
}
.optimization-contentTitle {
  padding: 15px 15px 20px 15px;
  display: flex;
  align-items: center;
}
.optimization-name {
  font-size: 18px;
  font-weight: bold;
  float: left;
  margin-right: 8px;
}
.optimization-dec {
  font-size: 12px;
  color: #ccc;
}
.optimization-pic {
  width: 86px;
  height: 86px;
  // margin-right: 10px;
}
.c-9svu68 {
  padding: 15px;
  &-desc {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
  }
  &-customer-label {
    font-size: 12px;
    color: #bd893a;
    div {
      display: inline-block;
      padding: 3px;
      margin-right: 5px;
      background-color: #fffaf0;
    }
  }
  &-first-month {
    font-size: 13px;
    color: #ec4001;
    margin-right: 8px;
  }
  &-last {
    font-size: 10px;
    color: #ccc;
  }
}
.optimization-card {
  box-sizing: border-box;
  position: relative;
  margin-bottom: 15px;
  border-bottom: 0.5px solid #e5e5e5;
  &:last-child {
    border-bottom: none;
  }
}
.c-9svu68-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  width: 200px;
  &-txt {
    // font-size: 10px;
    // background-color: rgba(246, 134, 87, 0.2);
    // padding: 0 5px;
    // border: 0.5px @c-color-primary solid;
    // border-radius: 3px;
    // color: @c-color-primary;
    // width: 25px;
    // height: 20px;
    // line-height: 20px;
    // margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 16px;
    border-radius: 4px;
    border: 0.5px solid @c-color-primary;
    background-color: rgba(246, 134, 87, 0.2);
    font-size: 12px;
    color: @c-color-primary;
    margin-top: 3px;
    margin-left: 10px;
  }
  &-active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 16px;
    border-radius: 4px;
    font-size: 12px;
    color: #1a73e8;
    background-color: #94d8f6;
    border: 0.5px solid #1a73e8;
    margin-top: 3px;
    margin-left: 10px;
  }
}
.c-lgl5rn {
  position: relative;
  width: 86px;
  height: 86px;
  margin-right: 10px;
  &-hot {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
